<div id="mainContainer" class="row-fluid">
    <div id="left" class="span3">
        <ul id="leftmenu">
            <li class="menu-two-level net_setting">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="net_setting">Connection Settings</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level dial_setting">
                        <a href="#settings_switched_dialup" data-trans="dial_setting">Dial-up Settings</a>
                    </li>

                    <li class="menu-three-level net_select">
                        <a href="#settings_switched_network" data-trans="net_select">Network Selection</a>
                    </li>

                    <li class="menu-three-level apn_setting">
                        <a href="#settings_switched_apn" data-trans="apn_setting">APN</a>
                    </li>
                </ul>
            </li>

            <li class="menu-two-level wifi">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="wifi">Wi-Fi</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level wifi_basic">
                        <a href="#settings_wifi_basic" data-trans="wifi_basic">Basic Settings</a>
                    </li>

                    <li class="menu-three-level wifi_advance">
                        <a href="#settings_wifi_advanced" data-trans="wifi_advance">Advanced Settings</a>
                    </li>

                    <li class="menu-three-level wps">
                        <a href="#settings_wifi_wps" data-trans="wps">WPS</a>
                    </li>

                    <li class="menu-three-level black_list">
                        <a href="#settings_wifi_black" data-trans="black_list">Black List</a>
                    </li>
                </ul>
            </li>

            <li class="menu-two-level device_setting">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="device_setting">Device Settings</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level password_management">
                        <a href="#settings_system_account" data-trans="password_management">Login Password</a>
                    </li>

                    <li class="menu-three-level pin_management">
                        <a href="#settings_system_pin" data-trans="pin_management">PIN Management</a>
                    </li>

                    <li class="menu-three-level restore">
                        <a href="#settings_system_reset" data-trans="restore">Reset</a>
                    </li>

                    <li class="menu-three-level shutdown">
                        <a href="#settings_system_shutdown" data-trans="shutdown">Shutdown</a>
                    </li>

                    <li class="menu-three-level restart">
                        <a href="#settings_system_restart" data-trans="restart">Restart</a>
                    </li>

                    <li class="menu-three-level sleep_mode">
                        <a href="#settings_system_power" data-trans="PowerSave"></a>
                    </li>

                    <li class="menu-three-level fastboot">
                        <a href="#settings_system_fast_boot" data-trans="fastboot">Fast Boot</a>
                    </li>
                </ul>
            </li>

            <li class="menu-two-level firewall">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="firewall">Firewall</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level port_filter">
                        <a href="#settings_security_filtering" data-trans="port_filter">Port Filtering</a>
                    </li>

                    <li class="menu-three-level port_map">
                        <a href="#settings_security_mapping" data-trans="port_map">Port Mapping</a>
                    </li>

                    <li class="menu-three-level upnp">
                        <a href="#settings_security_upnp" data-trans="upnp">UPnP</a>
                    </li>

                    <li class="menu-three-level dmz">
                        <a href="#settings_security_dmz" data-trans="dmz">DMZ</a>
                    </li>

                    <!-- <li class="menu-three-level system_security">
                        <a href="#settings_system_security" data-trans="system_security">System Security</a>
                    </li> -->
                </ul>
            </li>

            <li class="menu-two-level router_setting">
                <a href="#settings_system_router" data-trans="router_setting">Router</a>
            </li>

            <li class="menu-two-level status">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="status">Information</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level device_info">
                        <a href="#settings_info" data-trans="device_info">Status Information</a>
                    </li>

                    <li class="menu-three-level traffic_statistics">
                        <a href="#settings_traffic_statistics" data-trans="traffic_statistics">Statistics</a>
                    </li>

                    <li class="menu-three-level traffic_alert">
                        <a href="#settings_traffic_alert" data-trans="traffic_alert"></a>
                    </li>
                </ul>
            </li>

            <li class="menu-two-level phonebook">
                <a class="rootMenu" onclick="rootMenuClick(this)" data-trans="phonebook">Phonebook</a>
            </li>
            <li class="hide">
                <ul class="third">
                    <li class="menu-three-level group_all">
                        <a href="#settings_phonebook" data-trans="group_all">All</a>
                    </li>

                    <li class="menu-three-level group_common">
                        <a href="#settings_phonebook_common" data-trans="group_common">Common</a>
                    </li>

                    <li class="menu-three-level group_family">
                        <a href="#settings_phonebook_family" data-trans="group_family">Family</a>
                    </li>

                    <li class="menu-three-level group_friend">
                        <a href="#settings_phonebook_friend" data-trans="group_friend">Friend</a>
                    </li>

                    <li class="menu-three-level group_colleague">
                        <a href="#settings_phonebook_colleague" data-trans="group_colleague">Colleague</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="container" class="span9 paddingnone" style="margin-top: 0px;"></div>
</div>

<script>
    $(function() {
        clearIntervalTimer()
        $("#list-nav").find(".active").removeClass("active")
        $("#list-nav").find("[mid='settings_switched_dialup']").addClass("active");

        var currentTopic = window.location.hash;
        var match = window.findSettingsMenu(currentTopic);
        if (match.length == 0) {
            if (!window.location.hash.indexOf('http') == 0) {
                window.location.hash = '#home'
            }
        } else {
            if (window._noSIM == true && match[0].checkSIMStatus) {
                $('#container').html('<div class="colorRed font18" style="padding: 20px; text-align: center">' + $.i18n.prop('no_sim_card_message') + '</div>');
            } else {
                var toUrl = match[0].path + '.html';
                $('#container').load(toUrl)
            }
        }

        var currentNode = $("#leftmenu").find('a[href="' + currentTopic + '"]');
        var parent = currentNode.parent();
        parent.addClass('active');
        if (parent.attr("class").indexOf('menu-three-level') >= 0) {
            var rootMenu = parent.parent().parent();
            rootMenu.show();
            rootMenu.prev().addClass("active");
        }

        var parentList = currentNode.parents('.list');
        if (parentList.length != 0) {
            $(parentList[0]).addClass('active');
            $(parentList).find('.sub-list-wrap').show();
        }

        $('#mainContainer').translate()
    });

    function rootMenuClick(obj) {
        var parentNode = $(obj).parent();
        var firstHash = parentNode.next().find('a')[0].hash;
        if (window.location.hash == firstHash) {
            return;
        }

        $("#leftmenu").find(".active").removeClass("active");
        parentNode.addClass("active");
        window.location.hash = firstHash;
    }
</script>